<template>
  <div class="app-container">
    <div class="p"><van-image width="50px" height="50px" src="/assets/rap.gif"/> 坤坤</div>
    <div class="content">
      <router-view></router-view>
    </div>
    
    <div>
      <van-tabbar route class="tabbar">
        <van-tabbar-item replace to="/Sing" icon="audio">Sing</van-tabbar-item>
        <van-tabbar-item replace to="/Basketball" icon="fire">Basketball</van-tabbar-item>
        <van-tabbar-item replace to="/Dance" icon="like">Dance</van-tabbar-item>
        <van-tabbar-item replace to="/Rap" icon="hot">Rap</van-tabbar-item>
      </van-tabbar>
    </div>

  </div>
</template>

<style>
.app-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-image: url('/public/assets/唱歌8.jpg'); 
  background-size: cover; 
}

.p {
  font-size: 50px;
  margin: auto;
  margin-top: 5%;
  
}

.content {
  flex: 1;
}

.tabbar {
  flex-shrink: 0;
  width: 100%;
}
</style>

<script>
import router from './router'
import store from './store'

export default {
  name: 'App',
  router,
  store
}
</script>
